const DefaultPenAttributes = {
    diameter: 1,
}
const TextColor = '#612CC2'
const LineColor = '#eee'
const HideColor = 'rgba(0,0,0,0)'
const STEP = 100

class Draw {
    constructor(canvas, isHide = false) {
        console.log(canvas)
        this._canvas = canvas
        this.centerX = canvas.width / 2
        this.centerY = canvas.height / 2
        this.lastImg = null
        this.hide = isHide
        this.ctx = this._canvas.getContext('2d')
        this.drawChecker()
        this.addEvent()
    }

    addEvent() {
        this._canvas.onmousemove = e => {
            this.drawOverlay(e.layerX, e.layerY)
        }
        this._canvas.onmouseout = e => {
            this.ctx.putImageData(this.lastImg, 0, 0)
        }
    }

    getLastImg() {
        this.lastImg = this.ctx.getImageData(
            0,
            0,
            this._canvas.width,
            this._canvas.height
        )
    }

    drawOverlay(x, y) {
        this.ctx.putImageData(this.lastImg, 0, 0)
        this.ctx.font = '14px consolas'
        this.ctx.fillStyle = TextColor
        const _x = x - this._canvas.width / 2
        const _y = y - this._canvas.height / 2
        this.ctx.fillText(`(${Math.ceil(_x)}, ${-Math.ceil(_y)})`, x, y)
    }

    hideXY(type) {
        this.hide = type
        this.ctx.clearRect(0, 0, this._canvas.width, this._canvas.height)
        this.drawChecker()
    }

    resize(width, height) {
        this._canvas.width = width
        this._canvas.height = height

        this.centerX = width / 2
        this.centerY = height / 2
        this.drawChecker()
    }

    drawChecker(type) {
        this.ctx.clearRect(0, 0, this._canvas.width, this._canvas.height)
        var xLeft = -this.centerX
        var xRight = this.centerX
        var yBottom = -this.centerY
        var yTop = this.centerY

        var mainAxis = {
            coordinates: [
                { x0: xLeft, y0: 0, x1: xRight, y1: 0 },
                { x0: 0, y0: yBottom, x1: 0, y1: yTop },
            ],
            penAttributes: {
                diameter: 2,
            },
        }
        this.drawText({ text: 0, y: 0, x: 0 })
        var unitAxis = {
            coordinates: [],
            penAttributes: {
                diameter: 1,
            },
        }
        var baseCoord = STEP
        while (baseCoord < xRight) {
            unitAxis.coordinates.push({
                x0: baseCoord,
                y0: yBottom,
                x1: baseCoord,
                y1: yTop,
            })
            unitAxis.coordinates.push({
                x0: -baseCoord,
                y0: yBottom,
                x1: -baseCoord,
                y1: yTop,
            })
            this.drawText({ text: baseCoord, y: 0, x: baseCoord })
            this.drawText({ text: -baseCoord, y: 0, x: -baseCoord })
            baseCoord += STEP
        }
        baseCoord = STEP
        while (baseCoord < yTop) {
            unitAxis.coordinates.push({
                x0: xLeft,
                y0: baseCoord,
                x1: xRight,
                y1: baseCoord,
            })
            unitAxis.coordinates.push({
                x0: xLeft,
                y0: -baseCoord,
                x1: xRight,
                y1: -baseCoord,
            })
            this.drawText({ text: -baseCoord, x: 0, y: baseCoord })
            this.drawText({ text: baseCoord, x: 0, y: -baseCoord })
            baseCoord += STEP
        }

        var detailAxis = {
            coordinates: [],
            penAttributes: {
                diameter: 0.5,
            },
        }
        baseCoord = 0
        while (baseCoord < xRight) {
            baseCoord += 20
            if (baseCoord % STEP === 0) continue
            detailAxis.coordinates.push({
                x0: baseCoord,
                y0: yBottom,
                x1: baseCoord,
                y1: yTop,
            })
            detailAxis.coordinates.push({
                x0: -baseCoord,
                y0: yBottom,
                x1: -baseCoord,
                y1: yTop,
            })
        }
        baseCoord = 0
        while (baseCoord < yTop) {
            baseCoord += 20
            if (baseCoord % STEP === 0) continue
            detailAxis.coordinates.push({
                x0: xLeft,
                y0: baseCoord,
                x1: xRight,
                y1: baseCoord,
            })
            detailAxis.coordinates.push({
                x0: xLeft,
                y0: -baseCoord,
                x1: xRight,
                y1: -baseCoord,
            })
        }

        this.drawAxis(mainAxis)
        this.drawAxis(unitAxis)
        this.drawAxis(detailAxis)
        this.getLastImg()
    }
    drawAxis(axisData) {
        var i
        for (i = 0; i < axisData.coordinates.length; i++) {
            var c = axisData.coordinates[i]
            this.drawLine(axisData.penAttributes, c.x0, c.y0, c.x1, c.y1)
        }
    }
    drawLine(penAttributes, x0, y0, x1, y1) {
        const ctx = this._canvas.getContext('2d')
        this._setAttributes(ctx, penAttributes)
        ctx.beginPath()
        ctx.moveTo(this.centerX + x0, this.centerY + y0)
        ctx.lineTo(this.centerX + x1, this.centerY + y1)
        ctx.stroke()
        this._canvasDirty = true
    }
    drawText(textAttr) {
        const ctx = this._canvas.getContext('2d')
        ctx.font = '14px consolas'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'Middle'

        ctx.fillStyle = this.hide ? HideColor : TextColor
        ctx.fillText(
            textAttr.text,
            this.centerX + textAttr.x + 10,
            this.centerY + textAttr.y
        )
    }
    _setAttributes(context, penAttributes) {
        penAttributes = penAttributes || DefaultPenAttributes
        const diameter = penAttributes.diameter || DefaultPenAttributes.diameter

        context.strokeStyle = this.hide ? HideColor : LineColor
        context.lineCap = 'round'
        context.lineWidth = diameter
    }
}

export default Draw



// WEBPACK FOOTER //
// ./src/utils/draw.js